<template>
    <div class="common-layout">
        <el-container>
            <el-aside class="asideCon">
                <el-menu class="mb-10 menuTop" :default-active="'1'" :default-openeds="openeds">
                    <el-sub-menu :class="{'active':currentIndex}" index="1">
                        <template #title><span>练习室</span></template>
                        
                        <router-link to="/training/exerice">
                            <el-menu-item class="spacil" :class="{'active':currentIndex}" index="1-1"
                            @click="currentIndex=1">
                                我的练习室
                            </el-menu-item>
                        </router-link>
                        
                        
                    </el-sub-menu>
                </el-menu>

                <el-menu class="menuBto" default-active="0" @select="handleSelect">
                    <el-menu-item index="1">
                        <span>缓存</span>
                    </el-menu-item>
                    <el-menu-item index="2">
                        <span>音频库</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <span>收藏</span>
                    </el-menu-item>
                    
                        <router-link to="/training/view_records">
                            <el-menu-item index="4">
                                历史
                            </el-menu-item>
                        </router-link>
                    
                </el-menu>
            </el-aside>

            <div>
                <router-view></router-view>
            </div>
        </el-container>
    </div>
    
</template>
 
<script setup lang="ts">
import { ref } from 'vue';
const currentIndex=ref(1)
let openeds= ref(['1'])
const defaultMenu=ref(1)
const handleSelect = async (val: string) => {
    currentIndex.value=0
    defaultMenu.value=0
}
</script>
 
<style lang="less" scoped>
:deep(a:link:hover) {
    color: #f936bb !important;
    text-decoration: none;
}
.common-layout {
    width: 1200px;
    margin: 0 auto;
    margin-top: 20px;
    background-color: #f5f7f9;
    padding-bottom: 60px;
}
 .asideCon {
    width: 170px;
    margin-right: 10px;
    overflow-x: hidden;
    .menuTop {
        width: 100%;
        padding: 5px 0;
        margin-bottom: 10px;
        border: none;
        border-left: #fff solid 4px;
        position: relative;
        .el-sub-menu::before{
            position: absolute;
            content: '';
            width: 4px;
            height: 37px;
            top: 15px;
            left: 0;
            background-color: #fff;
        }
        
    }
    .menuBto {
        width: 100%;
        position: relative;

        .el-menu-item::before {
            position: absolute;
            content: '';
            width: 4px;
            height: 37px;
            top: 20%;
            left: 0;
            background-color: #fff;
            border: none;
        }
    }

    :deep(.menuTop .el-sub-menu.active::before) {
        background-color: #f93684;
        
    }

    :deep(.menuTop .el-sub-menu:hover::before) {
        outline: 0 !important;
        color: #2e95fb !important;
        background-color: #f93684;
        z-index: 10;
        // background: linear-gradient(270deg, #F2F7FC 0%, #FEFEFE 100%)!important;
    }

    :deep(.el-menu .el-menu-item:hover::before) {
        outline: 0 !important;
        // color: #2e95fb !important;
        z-index: 10;
        background-color: #f93684;

    }
    :deep(.el-menu .el-menu-item.is-active::before) {
        // color: #2e95fb !important;
        background-color: #f93684;

    }

    :deep(.el-menu .el-sub-menu .spacil) {
        outline: 0 !important;
        border-left: none;
        color: #000 ;

    }
    :deep(.el-menu .el-sub-menu .spacil.active) {
        outline: 0 !important;
        border-left: none;
        color: #f93684 !important;

    }
}
</style>